<template>
    <div class="safety">
      <div class="safety-l">
        <div class="text-box">
          <p class="title-top">
            人脸录入
          </p >
          <p class="title-bt">{{user.faceInfo!=null?Successful:notEntered}}</p>
        </div>
        <div class="face-img" v-if="user.faceInfo!=null">
          <el-image
              style="width: 200px; height: 200px"
              :src="user.faceInfo.faceImgBase64"
              fit="fill"></el-image>
        </div>
        <div class="pictures-box">
          <!--      <take-pictures ref="TakePhotos" @refreshDataList="refreshDataList" />-->
          <take-pictures-new/>
        </div>

      </div>
      <div class="safety-r">
        <div class="info">
          <h2>账号信息</h2>
          <p class="userId">用户ID:</p>
          <p class="nickName">昵称：{{ user.nickname }}</p>
          <p class="grade">等级：Lv0</p>
          <p class="kMoney">K币：50</p>
          <p class="registerTime">注册时间：{{registerDate}}</p>
        </div>
      </div>
    </div>
</template>

<script>
import TakePictures from "@/common/utils/Take-pictures";
import TakePicturesNew from "@/common/utils/Take-picturesNew";
export default {
    data() {
        return {
          user : localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {},
          Successful: '人脸已录入成功',
          notEntered: '人脸未录入请点击录入人脸以达到人脸登录功能'
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {

    },
    watch: {

    },
    methods: {
      refreshDataList(imgSrc) {
        // 这里返回服务器图片的地址
        console.log(imgSrc)
      },
    },
    components: {
      TakePicturesNew,
      TakePictures

    },
};
</script>

<style scoped lang="less">
.safety{
  height: 100%;
  display: flex;
  //flex-direction: column;
  .safety-l{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .text-box{
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20px;
      .title-top{
        font-size: 35px;
        text-align: center;
      }
      .title-bt{
        text-align: center;
      }
    }
    .face-img{

    }
    .pictures-box{
      margin-top: 50px;
    }
  }
  .safety-r{
    flex: 1;
    border-left: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    .info {
      height: 262px;
      background-color: #fff;
      padding:0 16px;
      color: #000;
      h2{
        height: 60px;
        line-height: 60px;
        font-size: 28px;
      }
      p{
        height: 35px;
        line-height: 35px;
      }
    }
  }
}
</style>
